<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>text-tspan</title>
  </head>
  <body>
    <!-- 
    1. text 元素用来定义文本
    2. text 元素有 7 个基本属性来定义坐标和角度
      - x: x 轴坐标
      - y: y 轴坐标
      - dx: x 轴偏移
      - dy: y 轴偏移
      - rotate: 旋转角度
      - textLegnth: 文本必须适合得宽度
      - lengthAdjust: 如何压缩或拉伸文本以适应 textLength 定义的宽度
  -->
    <svg
      width="400"
      height="500"
      viewBox="0 0 400 500"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <!-- 普通 -->
      <text x="5" y="15" style="fill: red">what's the svg-text</text>
      <!-- 镂空文本 -->
      <text x="5" y="50" style="fill: none; stroke: red; font-size: 36px">
        what's the svg-text
      </text>
      <!-- 填充色和边框色 -->
      <text x="5" y="100" style="fill: pink; stroke: blue; font-size: 36px">
        what's the svg-text
      </text>
      <!-- 单个字符旋转 -->
      <text x="5" y="150" fill="red" font-size="35" rotate="30">
        what's the svg-text
      </text>
      <!-- 文本旋转 -->
      <text
        x="5"
        y="200"
        fill="red"
        font-size="35"
        transform="rotate(30 20,40)"
      >
        what's the svg-text
      </text>
    </svg>

    <!-- 
      1. tspan 元素用来定义文本块（像 HTML - <span>)
      2. tspan 必须是 <text> 或 <tspan> 的子文本
      3. tspan 有 6 个基本属性来定义坐标和角度
        - x: x 轴坐标
        - y: y 轴坐标
        - dx: x 轴偏移
        - dy: y 轴偏移
        - rotate: 旋转角度
        - textLegnth: 文本必须适合得宽度
    -->
    <svg
      width="400"
      height="500"
      viewBox="0 0 400 500"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <text x="5" y="30" style="fill: red; font-size: 35px">
        what's the
        <tspan fill="none" stroke="green">svg-text</tspan>
      </text>
    </svg>
  </body>
</html>
